<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="showbtnedit"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="排序" :visible.sync="sortpopup" width="40%">
      <el-form
        ref="sortformInfo"
        :model="sortformInfo"
        class="demo-form-inline"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="类别" prop="title" label-width="100px">
          <span>{{sortformInfo.title}}</span>
        </el-form-item>
        <el-form-item label="顺序权重" prop="sort" label-width="100px">
          <el-input v-model="sortformInfo.sort"></el-input>
        </el-form-item>
        <el-form-item label="说明" label-width="100px">
          <span>按照权重由小到大在小程序显示顺序</span>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="sortpopup=false">取消</el-button>
          <el-button type="primary" @click="submitFormsort('sortformInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="编辑类别" :visible.sync="edittypeDialog" width="50%" @close="closeDialog()">
      <el-form
        ref="formInfo"
        :model="formInfo"
        class="demo-form-inline"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="类别名" prop="title">
          <el-input v-model="formInfo.title"></el-input>
        </el-form-item>
        <el-form-item label="类别前缀" prop="create_time">
          <el-input v-model="formInfo.create_time">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="类别消耗点" prop="point">
          <el-input v-model="formInfo.point">
            <template slot="append">点/小时</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*用于实际结算</div>
        </el-form-item>
        <el-form-item label="日封顶点" prop="vertex">
          <el-input v-model="formInfo.vertex">
            <template slot="append">点</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不封顶</div>
        </el-form-item>
        <el-form-item label="提前？天数预定" prop="reserve">
          <el-input v-model="formInfo.reserve">
            <template slot="append">天</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不限制</div>
        </el-form-item>
        <el-form-item label="可预订？天内的座位" prop="seat">
          <el-input v-model="formInfo.seat">
            <template slot="append">天</template>
          </el-input>
        </el-form-item>
        <el-form-item label="单次预定最少分钟数" prop="minute">
          <el-input v-model="formInfo.minute">
            <template slot="append">分钟</template>
          </el-input>
          <div style="color:#AFAFAF;font-size:14px">*设为0则为不限制</div>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="formInfo.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="类别说明" prop="desc">
          <el-input type="textarea" placeholder="请输入内容" v-model="formInfo.desc"></el-input>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="半开放格子桌图册" @close="handleClose" :visible.sync="atlaspopup" width="50%">
      <el-upload
        action="https://m.sapiki.com//admin/common/imageUpload"
        list-type="picture-card"
        :file-list="fileLists"
        :on-preview="handlePictureCardPreview"
        :on-success="handcardsuccess"
        :before-upload="beforeAvatarUpload"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisiblepath">
        <img width="50%" :src="dialogImageUrl" alt />
      </el-dialog>
      <div style="text-align:right">
        <el-button @click="atlaspopup=false">取消</el-button>
        <el-button type="primary" @click="config('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  lists,
  other
} from "@/api/user";
import Base64 from "@/utils/base";
import { getp_id } from "@/utils/getmenuid";
export default {
  inject: ["reload"],
  data() {
    return {
      fileLists: [],
      allpath: [],
      formInfo: "",
      dialogImageUrl: "",
      dialogVisiblepath: false,
      sortformInfo: "",
      sortpopup: false,
      edittypeDialog: false,
      atlaspopup: false,
      tableData: "",
      page: 1,
      showbtnedit:false,
      genre_id: ""
    };
  },
  created() {
    this.getlists();
    setTimeout(() => {
      this.getotherlist();
    }, 500);
  },
  methods: {
    getotherlist() {
      other({
      }).then(res => {
        this.tableData = res.result.data;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisiblepath = true;
    },
    handleRemove(file, fileList) {
      const filePath = file.response.file_path;
      // 2.从pictureList数组中，找到图片对应的索引值
      const i = this.allpath.findIndex(x => x == filePath);
      // 3.调用splice方法，移除图片信息
      this.allpath.splice(i, 1);
    },
    handcardsuccess(res, file) {
      // if (typeof this.fileLists[0] == "object") {
      //   this.fileLists.shift(this.fileLists);
      // }
      this.allpath.push(res.file_path);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type == "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return;
      }
    },
    getlists() {
      lists({
        request_data: Base64.encode(JSON.stringify({ pid: getp_id() }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        let btnarr = [];
        res.result.map(v => {
          btnarr.push(v.class_mark);
        });
        btnarr.forEach(item => {
          if (item == "system_36") {
            this.showbtnedit = true;
          }
        });
      });
    },
    handleEdit(val){
      this.$router.push({ path: "/admin/system/otherAdd",query: {id: val.id}})
    },
    //编辑
    editgenre(val) {
      this.formInfo = val;
      this.edittypeDialog = true;
    },
    del(val) {
      this.$confirm("确定删除此条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          genreDelete({
            request_data: Base64.encode(JSON.stringify({ id: val.id }))
          }).then(res => {
            if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.getotherlist();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.edittypeDialog = false;
    },
    setsort(val) {
      this.sortformInfo = val;
      this.sortpopup = true;
    },
    openbtn(val) {
      genreStatus({
        request_data: Base64.encode(JSON.stringify({ id: val.id }))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.getotherlist();
      });
    },
    showatlas(val) {
      this.genre_id = val.id;
      if (val.img) {
        let objimg = val.img;
        objimg.forEach(item => {
          let obj = {
            url: item.img
          };
          this.fileLists.push(obj);
        });
      }
      this.atlaspopup = true;
    },
    handleClose() {
      this.fileLists = []
      // this.reload();
    },
    // 保存操作
    submitForm(formName) {
      // console.log(this.formInfo);
      // return;
      this.$refs[formName].validate(valid => {
        if (valid) {
          let parmes = {
            id: this.formInfo.id,
            title: this.formInfo.title,
            create_time: this.formInfo.create_time,
            point: this.formInfo.point,
            vertex: this.formInfo.vertex,
            reserve: this.formInfo.reserve,
            seat: this.formInfo.seat,
            minute: this.formInfo.minute,
            price: this.formInfo.price,
            desc: this.formInfo.desc
          };
          genreEdit({
            request_data: Base64.encode(JSON.stringify(parmes))
          }).then(res => {
            if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.closeDialog();
            this.getotherlist();
          });
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    submitFormsort() {
      let parmes = {
        id: this.sortformInfo.id,
        sort: this.sortformInfo.sort
      };
      genreSort({
        request_data: Base64.encode(JSON.stringify(parmes))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.sortpopup = false;
        this.getotherlist();
      });
    },
    config() {
      // console.log(this.allpath);
      // console.log(this.fileLists);
      // return
      // if (typeof this.fileLists[0] == "object") {
      //   this.fileLists[0] = this.fileLists[0].url;
      let parmes = {
        genre_id: this.genre_id,
        img: this.allpath,
        id: ""
      };
      //   console.log(this.fileLists)
      //   return
      //   genreAtlas({
      //     request_data: Base64.encode(JSON.stringify(parmes))
      //   }).then(res => {
      //     this.atlaspopup = false;
      //     this.getotherlist();
      //     this.reload();
      //   });
      // }
      genreAtlas({
        request_data: Base64.encode(JSON.stringify(parmes))
      }).then(res => {
        if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
        this.atlaspopup = false;
        this.getotherlist();
        // this.reload();
      });
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding-left: 20px;
}
</style>
